<template>
    <div>
        <a-row>
            <a-row class='mytitle'>
                {{ $t('告警通道') }}
            </a-row>
            <NoAuthPage v-showNoAuth="'F3-1'" />

            <a-row v-userAuth="'H1-1'" style="margin:1em">
                <a-card hoverable>
                    <a-tabs :defaultActiveKey="defaultActiveKey">
                        <a-tab-pane :tab="$t('SNMP Trap ') + $t('Notice')" key="trap">
                            <Trap ref="trapRef" />
                        </a-tab-pane>

                        <a-tab-pane :tab="$t('邮件通道')" key="mail">
                            <Mail ref="mailRef"  @change-list="handleChangeSwitch" :mail="checkedEmail"/>
                        </a-tab-pane>

                        <a-tab-pane :tab="$t('Webhook通道')" key="hook">
                            <Hook ref="hookRef" @change-list="handleChangeSwitch" :hook="checkedHook"
                                :wechat="checkedWechat" />
                        </a-tab-pane>
                    </a-tabs>
                </a-card>
            </a-row>
        </a-row>
    </div>
</template>

<script>
import NoAuthPage from '@/components/common/NoAuthPage'
import Trap from './alarmChannel/snnptrap.vue'
import Mail from './alarmChannel/mail.vue'
import Hook from './alarmChannel/webhook.vue'

export default {
    name: 'alarmChannel',
    components: { NoAuthPage, Trap, Mail, Hook },
    data() {
        return {
            defaultActiveKey: 'trap',
            // checkedSNMP: false,
            checkedEmail: false,
            checkedWechat: false,
            checkedHook: false,
            isopen: false,
        }
    },
    mounted() {
        this.getSwitch()
    },
    methods: {
        async getSwitch() {
            const { data: { mes } } = await this.$api.alarm.getAlarmSwitch()
            this.checkedEmail = !!mes.smtp
            this.checkedHook = !!mes.hook
            this.checkedWechat = !!mes.wechat
        },
       async handleChangeSwitch(name, val) {
            let flag = val === true ? 1 : 0
            const params = {
                [name]: flag
            }
            const item = {
                'hook': Number(this.checkedHook),
                'wechat': Number(this.checkedWechat),
                // 'snmp': Number(this.checkedSNMP),
                'smtp': Number(this.checkedEmail)
            }
            const { data } = await this.$api.alarm.modifyAlarmSwitch({ ...item, ...params });
            if (data.flag == 1) {
                this.model(data.id) //返回模板
                this.notice(data.id, data.params, data.flag) //通知列表显示
            } else {
                this.getSwitch()
                if(flag == true){
                    this.$message.success('开启成功！')
                }else if(flag == false){
                    this.$message.success('关闭成功！')
                }
            }
        },
    }
}
</script>


<style></style>
